<template>
    <div class="box">
      <van-search  placeholder="APP商品上市" >
            <template #left>
               商品搜索
            </template>
           
        </van-search>
  <div class="content">
    <div class="side">
      <van-sidebar v-model="active" @change="onChange" class="left">
  <van-sidebar-item title="食品" />
  <van-sidebar-item title="电器" />
  <van-sidebar-item title="服装" />
  <van-sidebar-item title="食品" />
  <van-sidebar-item title="手机" />
  <van-sidebar-item title="零食" />
</van-sidebar>
<ul class="right">
  <li v-for="item in list":key="item.id">
    <img :src="item.image" alt="">
    <p>{{ item.title }}</p>
  </li>
</ul>
    </div>
 
  </div> 
    </div>
 
</template>
<script setup>
import request from '@/utils/request'
import { onMounted, ref } from 'vue';


    const active = ref(0);
    const list = ref([]);
   const onChange=(index)=>{
    console.log(index);
    const arr=['食品','电器','服装','手机','零食']
    request.get('/kind',{
      params:{key:arr[index]}
    }).then(res=>{
      if(res.data.code==200){
        list.value=res.data.data
      }
    })
   }
   onMounted(()=>{
    onChange(0)
   })

</script>
<style lang="scss" scoped>
.side{
  display: flex;
}
.left{
  position: fixed;

}
.right{
  margin-left:70px ;
  column-count: 3;
  li{
    break-inside: avoid;
  }
}
</style>